<template>
    <div id="left-bottom-bar" style="width: 100%; height: 483px"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import echarts from '@/echarts'

import { result } from '../../constant'
import { option } from './constant'

export default defineComponent({
    name: 'LeftBottomBar',
    setup() {
        const constant = {
            option
        }
        onMounted(() => {
            let res = result
                .filter((item: any, index: any) => {
                    return index < 5
                })
                .map((item: any, index: any) => {
                    return {
                        name: item.countySaleFirst,
                        sale: item.firstSales,
                        rank: index + 1
                    }
                })
                .reverse()

            let paiming = res.map((item: any) => item.rank)
            let xingm = res.map((item: any) => item.name)
            let zongjine = res.map((item: any) => item.sale)
            constant.option.yAxis.data = xingm
            constant.option.series[2].data = zongjine
            constant.option.series[2].label.formatter = function (data: any) {
                //富文本固定格式{colorName|这里填你想要写的内容}
                if (paiming[data.dataIndex] == 1) {
                    return (
                        '{start1|}{red|' +
                        paiming[data.dataIndex] +
                        '  ' +
                        xingm[data.dataIndex] +
                        '}' +
                        '                                                           ' +
                        '{white|    总销售额：}{gray|' +
                        zongjine[data.dataIndex] +
                        '}{white|万元}'
                    )
                } else if (paiming[data.dataIndex] == 2) {
                    return (
                        '{start1|}{yellow|' +
                        paiming[data.dataIndex] +
                        '  ' +
                        xingm[data.dataIndex] +
                        '}' +
                        '                                                           ' +
                        '{white|    总销售额：}{gray|' +
                        zongjine[data.dataIndex] +
                        '}{white|万元}'
                    )
                } else if (paiming[data.dataIndex] == 3) {
                    return (
                        '{start1|}{green|' +
                        paiming[data.dataIndex] +
                        '  ' +
                        xingm[data.dataIndex] +
                        '}' +
                        '                                                           ' +
                        '{white|    总销售额：}{gray|' +
                        zongjine[data.dataIndex] +
                        '}{white|万元}'
                    )
                } else {
                    return (
                        '{start2|}{white|' +
                        paiming[data.dataIndex] +
                        '  ' +
                        xingm[data.dataIndex] +
                        '}' +
                        '                                                           ' +
                        '{white|    总销售额：}{gray|' +
                        zongjine[data.dataIndex] +
                        '}{white|万元}'
                    )
                }
            }
            echarts.init(document.getElementById('left-bottom-bar')).setOption(constant.option)
        })
        return {
            ...constant
        }
    }
})
</script>
